<template>
  <a-form>
    <a-row :gutter="24">
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="举报人">
          <a-input v-model="queryParam.informant" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="举报电话">
          <a-input v-model="queryParam.informantPhone" allowClear />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="所属板块">
          <!-- <a-select allowClear :default-value="{ id: userInfo.DepartmentID }" v-model="queryParam.departmentID"
            @change="handleChange" :disabled="isDepartment">
            <a-select-option v-for="(department, index) in departmentOptions" :key="index" :value="department.Id">
              {{ department.DepartmentName }}</a-select-option>
          </a-select> -->
          <a-cascader :options="departmentOptions" :default-value="[queryParam.departmentID]" :load-data="loadData"
            :field-names="{ label: 'DepartmentName', value: 'Id', children: 'children' }" change-on-select
            @change="handleChange" placeholder="请选择" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="举报时间起">
          <a-date-picker @change="informantTimeStartChange" />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24">
        <a-form-item v-bind="formItemLayout" label="举报时间止">
          <a-date-picker @change="informantTimeEndChange" />
        </a-form-item>
      </a-col>
      <!-- <collapse-transition>
        <div v-show="!more">

        </div>
      </collapse-transition> -->
    </a-row>
    <a-row :gutter="24">
      <a-col :lg="24" :md="24" :sm="24">
        <a-form-item :style="{ float: 'right' }">
          <!-- <a @click="toggle">
            {{ more ? '展开' : '收起' }}
            <a-icon :type="more ? 'caret-down' : 'caret-up'" />
          </a> -->
          <a-button type="primary" style="margin-left: 14px;" @click="onSearch(queryParam)">查询</a-button>
          <!-- <a-button v-if="displayf != 'choose'" @click="add" style="margin-left: 14px;">添加</a-button> -->
          <!-- <a-button v-if="displayf != 'choose'" style="margin-left: 14px;" @click="importExcel(queryParam)">导入</a-button> -->
          <!-- <a-button v-if="displayf != 'choose' && area == 'basic'" style="margin-left: 14px;" @click="exportExcel(queryParam)">导出</a-button> -->
          <a-popconfirm v-if="displayf != 'choose' && isAdmin()" @confirm="deleted" placement="left" title="确定删除?"
            okText="确定" cancelText="取消">
            <a-button type="danger" style="margin-left: 14px;">删除</a-button>
          </a-popconfirm>
          <a-button v-if="displayf == 'choose'" style="margin-left: 14px;" @click="enSure()">确定</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import '@/views/treeselect1.css'
import { deleteChildrenIfNull2 } from '@/utils/util'
import { authDevice } from '@/utils/mixin'

import { GetAllChildDeptByParentID } from '@/api/project'

const userInfo = Vue.ls.get(ACCESS_TOKEN)
export default {
  name: 'SearchFom',
  mixins: [authDevice],
  components: {},
  props: {
    area: {
      type: String,
      required: false
    },
    displayf: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      a: process.env.VUE_APP_API_BASE_URL + '/api/students/ImportExcel',
      normalizer(node) {
        return {
          id: node.ID,
          label: node.Title,
          children: node.Childrens
        }
      },
      fileList: [],
      userInfo,
      more: false,
      open: false,
      queryParam: {
        projectName: null,
        departmentID: userInfo.DepartmentID,
        startDateStart: null,
        startDateEnd: null,
        endDateStart: null,
        endDateEnd: null,
        ownerUnit: null,
        constructionUnit: null,
        supervisorUnit: null
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      departmentOptions: [], // 部门列表
      isDepartment: false, // 是否含有部门
    }
  },
  watch: {},
  computed: {},
  created() {
    this.isDepartment = false
    this.getAllChildDeptByParentID(1, 1)
  },
  mounted() { },
  methods: {
    toggle() {
      this.more = !this.more
    },
    informantTimeStartChange(dates, dateStrings) {
      this.queryParam.informantTimeStart = dateStrings;
    },
    informantTimeEndChange(dates, dateStrings) {
      this.queryParam.informantTimeEnd = dateStrings;
    },
    handleChange(val, option) {
      if (val.length > 1) {
        this.queryParam.departmentID = val[1]
      } else {
        this.queryParam.departmentID = val
      }
    },
    loadData(selectedOptions) {
      const targetOption = selectedOptions[selectedOptions.length - 1]
      targetOption.loading = true
      this.getAllChildDeptByParentID(targetOption.Id).then(res => {
        targetOption.loading = false
        targetOption.children = res
        this.departmentOptions = [...this.departmentOptions]
      })
    },
    deleted() {
      this.$emit('handleDel')
    },
    enSure() {
      this.$emit('handleEnSure')
    },
    onSearch(data) {
      const objData = { ...data }
      this.$emit('search', objData)
    },
    async getAllChildDeptByParentID(id, step) {
      if (step === 1) {
        await GetAllChildDeptByParentID(id).then(res => {
          res.forEach(r => {
            r.isLeaf = false
          })
          this.departmentOptions = res
          let flag = false
          flag = this.departmentOptions.some((opt) => {
            return opt.Id === userInfo.DepartmentID
          })
          if (!flag) {
            this.queryParam.departmentID = null
            this.onSearch(this.queryParam)
          }
        })
      } else {
        return GetAllChildDeptByParentID(id)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
